<?php include 'header.php'; ?>


<h1>My Reservations</h1>


<script type='text/template' id='restemplate'>

    {{#each objects}}

    <div class="well">
    <h3>{{#rooms_info}}{{hotel_name}}{{/rooms_info}}</h3>
    <table cellpadding="10"><tr><td>
    <img align="left" src="img/room_{{#rooms_info}}{{room_typecode}}{{/rooms_info}}.jpg"></td><td valign="top"><table cellpadding="5">

    <tr><td align="right"><b>Reservation ID</b></td><td>{{booking_id}}</td></tr>
    <tr><td align="right"><b>Check In</b></td><td>{{date_from}}</td></tr>
    <tr><td align="right"><b>Check Out</b></td><td>{{date_to}}</td></tr>
    <tr><td align="right"><b>Room Type</b></td><td>{{#rooms_info}}{{room_typedescription}}{{/rooms_info}}</td></tr>
    <tr><td align="right"><b>Cost</b></td><td>${{payment_due_amount}}</td></tr>
                </table>
    </td></tr>
    <tr><td><p><button class="btn btn-primary btn-medium" onClick="cancelConfirm({{booking_id}})">Cancel This Reservation &raquo;</a></p></td><td>
    </td></tr></table>
    </div>
    {{/each}}

</script>

<script type="text/javascript">



    function cancelConfirm(bookingid)
    {

        $('.confirm_delete').unbind('click');
        $('#modalconfirm').modal("show");


        $(function() {

            $('.confirm_delete').on('click', function() {

                xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function()
                {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                    {

                        $('#modalconfirm').modal("hide");
                        loadReservations();

                    }
                }

                xmlhttp.open("GET", "db/CustomerReservationsSearch.php?Action=Delete&booking_id=" + bookingid, true);
                //xmlhttp.open("GET", "db/CustomerReservationsSearch.php", true);
                xmlhttp.send();


            });






        });


    }


    function cancelReservation(bookingid)
    {
        $("#content").html("Loading ...");
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {

                var data = JSON.parse(xmlhttp.responseText);
                data.pop();
                var source = $("#restemplate").html();
                var template = Handlebars.compile(source);
                $("#content").html(template({objects: data}));




            }
        }
        xmlhttp.open("GET", "db/CustomerReservationsSearch.php", true);
        xmlhttp.send();


    }


    function loadReservations()
    {
        $("#content").html("Loading ...");
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function()
        {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {

                var data = JSON.parse(xmlhttp.responseText);
                data.pop();
                var source = $("#restemplate").html();
                var template = Handlebars.compile(source);
                $("#content").html(template({objects: data}));

                if (data.length == 0)
                    $("#content").html("You currently have no reservations");

            }
        }
        xmlhttp.open("GET", "db/CustomerReservationsSearch.php", true);
        xmlhttp.send();


    }



    $(document).ready(function() {

        $(function() {


            loadReservations();


        });

    });

</script>


<div id="content">
</div>


<div id="modalconfirm" class="modal hide fade" style="display: none; z-index: 20000000000;">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3>Cancel Reservation</h3>
    </div>
    <div class="modal-body" id="modal-body">
        Are you sure you want to cancel this reservation?
    </div>
    <div class="modal-footer">
        <a href="#" class="btn confirm_delete no_return">Yes</a>
        <a href="#" class="btn btn-secondary " data-dismiss="modal">No</a>

    </div>
</div>


<?php include 'footer.php'; ?>